{% load static %}
<!doctype html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/styles/default.min.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/highlight.min.js"></script>
    <script type="text/javascript" src="{% static "hljs/highlightjs-line-numbers.min.js" %}"></script>
    <style type="text/css">
        .hljs-line-numbers {
            text-align: right;
            border-right: 1px solid #ccc;
            color: #999;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
    </style>
</head>
<body>
    <div class="container">

        <div class="row">
            <pre><code class="python"># more python code
            class TestFormView(FormView):
                template_name = "index.html"
                form_class = MyForm
            </code></pre>
        </div>

        <div class="row">
            <div class="col-md-12">

            <form role="form" method="POST" action="">
                {% csrf_token %}
                {{ form }}
            </form>
            {{ form.media }}

            </div><!-- /col-md-12 -->
        </div>
    </div>
    <script type="text/javascript">
        // hljs.initHighlightingOnLoad();
        let element = document.getElementsByClassName('markdownx');

        Object.keys(element).map(key =>

            element[key].addEventListener('markdownx.update', event => {
                console.log(event.detail);
                s = document.querySelector('div.markdownx-preview pre code');
                console.log(s);
                if (s !== null)
                {
                    hljs.highlightBlock(s);
                    hljs.lineNumbersBlock(s);
                }
            })
        );
    </script>
</body>
</html>
